{% include 'include/golf_head.html' %}
<!-- Page Container START -->
            <div class="page-container">
                <!-- Content Wrapper START -->
                <div class="main-content">

                    <div class="page-header">
                        <h2 class="header-title">{{ yard.name }}</h2>
                        <div class="header-sub-title">
                           <button class="btn btn-secondary btn-tone m-r-5" id="submit">结账</button>
                        </div>
                    </div>
                    <div class="card">
                            <div class="card-body">
                                <h3 class="header-title">帐单明细</h3>
                                <div class="m-t-25">
                                    开始时间:   {{ yard.starttime }}
                                </div>
                                <div class="m-t-25">
                                    结束时间:   {{ endtime }}
                                </div>
                                <div class="m-t-25">
                                    用时长:   {{ times }}
                                </div>
                                <div class="m-t-25">
                                    收费标准:  每{{ yard.get_charge_display }} {{ yard.charge_num }} 元
                                </div>
                                <div class="m-t-25">
                                    收费金额: <input type="text" name="name" class="form-control col-sm-3" required="" id="money" ></input>
                                </div>
                                <div class="m-t-25">
                                    <a class="text-primary btn btn-sm btn-hover">
                                        <span data-toggle="modal" data-target="#useMembers">
                                           选择会员:
                                        </span>
                                    </a>

                                    <input type="text" name="name" class="form-control col-sm-3" required="" id="member" disabled="true"></input>
                                </div>
                            </div>
                    </div>
                </div>
                <!-- Content Wrapper END -->
<!--使用会员-->
    <div class="modal fade" id="useMembers">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">选择会员</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <i class="anticon anticon-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <input type="text" class="form-control" placeholder="会员电话号" id="phone2">
                        </div>
                        <div class="col-auto">
                            <button id="findMemberPhone2" class="btn btn-primary">查询</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table memberlist">
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                    <button type="button" class="btn btn-primary" id="usemembersubmit">确定</button>
                </div>
            </div>
        </div>
    </div>
                <!-- Footer START -->
                <footer class="footer">
                    <div class="footer-content">
                        <p class="m-b-0">Copyright © 2019 Theme_Nate. All rights reserved.</p>
                        <span>
                            <a href="" class="text-gray m-r-15">Term &amp; Conditions</a>
                            <a href="" class="text-gray">Privacy &amp; Policy</a>
                        </span>
                    </div>
                </footer>
                <!-- Footer END -->
             {% csrf_token %}
            </div>
            <!-- Page Container END -->

        </div>
    </div>


    <!-- Core Vendors JS -->
    <script src="/static/assets/js/vendors.min.js"></script>

    <!-- page js -->
    <script src="/static/assets/vendors/datatables/jquery.dataTables.min.js"></script>
    <script src="/static/assets/vendors/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/static/assets/js/pages/datatables.js"></script>

    <!-- Core JS -->
    <script src="/static/assets/js/app.min.js"></script>
    <script>
        function findPhone(phone) {
            var csrf = $('[name="csrfmiddlewaretoken"]').val();
            $.ajax({
                type: "POST",
                data: {phone: phone, csrfmiddlewaretoken: csrf},
                dataType: "json",
                url: "/golf/invoiceFINDmemberPhone/",
                success: function (message) {
                    //alert(message[0]["sku"]);
                    $.each(message, function (i, item) {
                        $(".memberlist tbody").prepend('<tr><th scope="row"><input name="memberList" type="checkbox" checked="" value="' + item.phone + '"></th><td>' + item.name + '</td><td>' + item.phone + '</td></tr>');
                    });
                },
                error: function (message) {
                    alert(message.re);
                }
            });
        }

        $(document).ready(
            function() {
                 $("#submit").click(function(){
                     var member = $("#member").val()
                     var money = $("#money").val()
                     var csrf = $('[name="csrfmiddlewaretoken"]').val();
                    $.ajax({
                        type: "POST",
                        data: {member: member,money:money, csrfmiddlewaretoken: csrf},
                        dataType: "json",
                        success: function (message) {
                            alert(message.re);
                            window.location.href = "/golf/index/";
                        },
                        error: function (message) {
                            alert(message.re);
                        }
                    });
                });


                $("#findMemberPhone2").click(function(){
                    var phone  = $('#phone2').val();
                    findPhone(phone)
                });

                $("#usemembersubmit").click(function(){
                var member = [];
                $("input[name='memberList']:checked").each(function(i){
                    member[i] = $(this).val();
                    $("#member").val($(this).val())
                })
                console.log(member)
            });
            });
    </script>
</body>

</html>